<template>
	<view class="container">
		<view class="back-btn" @tap="goBack" :style="{ top: winInfo.top + 'px' }">
			<tui-icon name="arrowleft" color="#999" size="25"></tui-icon>
			<!-- <image src="/static/images/huodong/left.png" class="back-img"></image> -->
		</view>
		<view style="margin-top: 230rpx">
			<view class="logo-box">
				<image src="/static/images/common/logo.png" class="logo-img" style="margin-top: 12rpx; margin-bottom: 16rpx"></image>
				<view class="login-BT">绑定手机号</view>
				<!--        <view class="logo-title">
          <view>请绑定手机号</view>
          <view>以完成注册</view>
        </view> -->
				<view class="input-container">
					<view class="input-box">
						<view class="input-title">
							<image class="title-img" src="/static/images/common/phone1.png"></image>
							<view>+86</view>
						</view>
						<input type="number" v-model="Phone" maxlength="11" placeholder="请输入手机号" placeholder-class="input-holder" />
					</view>
					<view class="input-box captcha-box">
						<input type="text" v-model="captchaCode" maxlength="4" placeholder="请输入图形验证码" placeholder-class="input-holder" />
						<image :src="captchaImage" class="captcha-image" @tap="GetCaptcha"></image>
					</view>
					<view class="input-box" style="justify-content: space-between">
						<input type="number" v-model="code" maxlength="11" placeholder="请输入验证码" placeholder-class="input-holder" />
						<view class="get_SMCode" @tap="sendSmsCode" v-if="DaoJS == 0">获得验证码</view>
						<view class="get_SMCode" v-else>{{ DaoJS }}后重试</view>
					</view>
					<view class="input-box">
						<image src="/static/images/common/password.png"></image>
						<input type="text" password="true" v-model="password" maxlength="20" placeholder="请输入密码" placeholder-class="input-holder" />
					</view>
					<view class="input-box">
						<image src="/static/images/common/password.png"></image>
						<input type="text" password="true" v-model="password1" maxlength="20" placeholder="请再次输入密码" placeholder-class="input-holder" />
					</view>
				</view>
			</view>
			<view class="login-btns" @tap="bindPhone">确认绑定</view>
		</view>
		<!-- 隐私权限 -->
		<view class="yinsi-box">
			<radio :checked="xieyi" color="#FB353B" @tap="xieyi = !xieyi">已阅读及同意</radio>
			<view class="xieyi-info">《栖木社》</view>
			<view class="xieyi-info">《登录政策》</view>
			<view class="xieyi-info">《隐私政策》</view>
		</view>
	</view>
</template>

<script>
import { TUILogin } from '@tencentcloud/tui-core';
export default {
	data() {
		return {
			xieyi: true,
			Phone: '',
			code: '',
			DaoJS: 0,
			options: {},
			IsDisabled: false,
			captchaCode: '',
			captchaImage: '',
			captchaId: '',
			password: '',
			password1: '',
			winInfo: {
				height: 64, //header高度
				top: 26, //标题图标距离顶部距离
				scrollH: 0 //滚动总高度
			}
		};
	},
	mounted() {
		let obj = {};
		// #ifdef MP-WEIXIN
		obj = wx.getMenuButtonBoundingClientRect();
		// #endif
		// #ifdef MP-BAIDU
		obj = swan.getMenuButtonBoundingClientRect();
		// #endif
		// #ifdef MP-ALIPAY
		my.hideAddToDesktopMenu();
		// #endif

		setTimeout(() => {
			uni.getSystemInfo({
				success: (res) => {
					this.winInfo = res;
					this.winInfo.width = obj.left || res.windowWidth;
					this.winInfo.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
					this.winInfo.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
					this.winInfo.scrollH = res.windowWidth;
				}
			});
		}, 0);
	},
	onLoad(options) {
		this.options = options;
		console.log(options, 'options');
		this.GetCaptcha();
	},
	methods: {
		GetCaptcha() {
			var self = this;
			uni.request({
				url: self.Microi.ApiBase + '/api/Captcha/getCaptcha',
				method: 'GET',
				responseType: 'arraybuffer',
				data: {
					OsClient: self.Microi.OsClient
				},
				success: (result) => {
					if (result && result.header && result.header.captchaid) {
						self.captchaId = result.header.captchaid;
					}
					var src = 'data:image/png;base64,' + uni.arrayBufferToBase64(result.data);
					self.captchaImage = src;
				},
				fail: (data, code) => {}
			});
		},
		async sendSmsCode() {
			var self = this;
			if (self.IsDisabled) {
				self.Microi.Tips('请勿重复点击', false);
				return;
			}
			self.IsDisabled = true;
			if (self.DaoJS) {
				self.Microi.Tips('请等待倒计时结束', false);
				self.IsDisabled = false;
				return;
			}
			if (!self.Phone || self.Phone.length != 11 || !/^1[3-9]\d{9}$/.test(self.Phone)) {
				self.Microi.Tips('请检查手机号', false);
				self.IsDisabled = false;
				return;
			}
			if (!self.captchaCode) {
				self.Microi.Tips('请输入图形验证码', false);
				self.IsDisabled = false;
				return;
			}
			var res = await self.Microi.ApiEngine.Run('send_sms_reg', {
				Phone: self.Phone,
				_CaptchaValue: self.captchaCode,
				OsClient: self.Microi.OsClient,
				_CaptchaId: self.captchaId
			});
			console.log(res, 'res');
			if (res.Code == 0) {
				self.Microi.Tips(res.Msg || '发送失败', false);
				self.IsDisabled = false;
				return;
			} else {
				self.DaoJS = 60;
				const interval = setInterval(() => {
					if (self.DaoJS > 0) {
						self.DaoJS--;
					} else {
						clearInterval(interval);
					}
				}, 1000);
			}
			self.IsDisabled = false;
		},
		async bindPhone() {
			var self = this;
			if (!this.xieyi) {
				self.Microi.Tips('请先同意隐私协议~', false);
				return;
			}
			if (self.IsDisabled) {
				self.Microi.Tips('请勿重复点击', false);
				return;
			}
			self.IsDisabled = true;
			if (!self.Phone || self.Phone.length != 11 || !/^1[3-9]\d{9}$/.test(self.Phone)) {
				self.Microi.Tips('请检查手机号', false);
				self.IsDisabled = false;
				return;
			}
			if (!self.code) {
				self.Microi.Tips('请输入验证码', false);
				self.IsDisabled = false;
				return;
			}
			if (!self.password) {
				self.Microi.Tips('请输入密码', false);
				self.IsDisabled = false;
				return;
			}
			if (!self.password1 || self.password != self.password1) {
				self.Microi.Tips('请核对密码是否相同', false);
				self.IsDisabled = false;
				return;
			}
			// 这里调用绑定手机号的API，接口参数请根据实际调整
			var res = await self.Microi.ApiEngine.Run('user_resgister', {
				Phone: self.Phone,
				_SmsCaptchaValue: self.code,
				Pwd: self.password,
				MiniProgramOpenId: self.options.MiniProgramOpenId,
				WxUnionId: self.options.WxUnionId,
				AppOpenId: self.options.AppOpenId
				// 其他参数如有需要可补充
			});
			console.log(res, 'res');
			if (res.Code == 0) {
				this.Microi.Tips(res.Msg, false);
				self.IsDisabled = false;
				return;
			}
			var data = res.Data;
			if (uni.getStorageSync('myAccountList')) {
				var myAccountList = uni.getStorageSync('myAccountList');

				// 检查myAccountList是否超过10个元素
				if (myAccountList.length >= 10) {
					myAccountList.shift(); // 删除第一个元素
				}

				// 查找当前用户ID是否已经存在于myAccountList中
				var index = myAccountList.findIndex((val) => val === data.CurrentUser.Id);
				if (index === -1) {
					myAccountList.push(data.CurrentUser.Id); // 如果不存在，则插入新的用户ID
				} else {
					// 如果已经存在，可以考虑更新LastSwitchedAt时间戳或进行其他操作
					// 这里假设不需要进一步操作，直接跳过
				}

				// 更新存储
				uni.setStorageSync('myAccountList', myAccountList);
			} else {
				var myAccountList = [data.CurrentUser.Id];
				uni.setStorageSync('myAccountList', myAccountList);
			}
			self.Microi.SetCurrentUser(data.CurrentUser);
			self.Microi.SetToken(data.Token);
			self.Imlogin(data.CurrentUser.Account);
			if (res.DataAppend && res.DataAppend.Type && res.DataAppend.Type == 'zhuce') {
				uni.reLaunch({
					url: '/pages/common/infoEdit/infoedit'
				});
			} else {
				self.Microi.Tips('登录成功~');
				// var data = res.data.Data;
				// self.Microi.SetCurrentUser(data.CurrentUser);
				// self.Microi.SetToken(data.Token);
				let pages = getCurrentPages();
				let currentPage = pages[pages.length - 2];

				setTimeout(function () {
					uni.reLaunch({
						url: currentPage.$page.fullPath
					});
					/*
						if(!data.CurrentUser.Name){
							uni.reLaunch({
								url: '/pages/my/set/set'
							})
						}else{
							uni.reLaunch({
								url: currentPage.$page.fullPath
							})
						}*/
				}, 500);
			}
			self.Microi.Tips('绑定成功~');
			// 绑定成功后跳转页面（如需调整请修改）
			setTimeout(function () {
				uni.reLaunch({
					url: '/pages/common/infoEdit/infoedit'
				});
			}, 500);
			self.IsDisabled = false;
		},
		async Imlogin(Account) {
			var UserSig = await this.Microi.ApiEngine.Run('get_Im_UserId', {
				Account: Account
			});
			UserSig = UserSig.Data;
			TUILogin.login({
				SDKAppID: 1600084585,
				userID: Account,
				userSig: UserSig,
				useUploadPlugin: true,
				useProfanityFilterPlugin: false,
				framework: `vue2` // 当前开发使用框架 vue2 / vue3
			}).then(() => {
				console.log('登录成功');
				// const conversationID = options.conversationID;
				// TUIConversationService.switchConversation(conversationID);
			});
		},
		goBack() {
			let pages = getCurrentPages(); // 获取当前页面堆栈
			let pageCount = pages.length; // 页面堆栈中的页面数量
			// 判断是否有上级页面
			if (pageCount > 1) {
				// 如果有上级页面，则返回上级页面
				uni.navigateBack({
					delta: 1
				});
			} else {
				// 如果没有上级页面，则返回首页
				uni.switchTab({
					url: '/pages/tabbar/find/find' // 替换为你的首页路径
				});
			}
		}
	}
};
</script>

<style>
.container {
}
.logo-box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-family: Inter, Inter;
	font-weight: bold;
	color: #212121;
	line-height: 56rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.login-BT {
	font-weight: 800;
	font-size: 56rpx;
	color: #212121;
	line-height: 66rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
	margin-bottom: 50rpx;
}
.logo-title {
	width: 190rpx;
	height: 116rpx;
	font-weight: 500;
	font-size: 32rpx;
	color: #212121;
	line-height: 58rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
	margin-bottom: 76rpx;
}
.logo-img {
	width: 210rpx;
	height: 210rpx;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
}
.input-container {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 40rpx;
}
.input-box {
	width: 664rpx;
	height: 92rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(10, 102, 194, 0.2);
	border-radius: 120rpx 120rpx 120rpx 120rpx;
	opacity: 0.6;
	padding: 20rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.input-box image {
	width: 44rpx;
	height: 44rpx;
	margin-right: 18rpx;
}
.input-title {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	border-right: 2rpx solid #eeeeee;
	padding-right: 20rpx;
	font-weight: 500;
	font-size: 28rpx;
	color: #999999;
	line-height: 33rpx;
	font-style: normal;
	text-transform: none;
	text-align: left;
	margin-right: 20rpx;
}
input {
	text-align: left;
}
.input-title image {
	width: 44rpx;
	height: 44rpx;
}
.input-holder {
	font-weight: 500;
	font-size: 28rpx;
	color: #999999;
	line-height: 33rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.get_SMCode {
	width: 226rpx;
	height: 70rpx;
	background: #e9f2fa;
	border-radius: 130rpx 130rpx 130rpx 130rpx;
	line-height: 70rpx;
	text-align: center;
	font-weight: bold;
	font-size: 28rpx;
	color: #FB353B;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.login-btns {
	width: 440rpx;
	height: 92rpx;
	background: #FB353B;
	border-radius: 130rpx 130rpx 130rpx 130rpx;
	font-weight: bold;
	font-size: 32rpx;
	color: #ffffff;
	line-height: 92rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
	margin: auto;
	margin-top: 60rpx;
}
.yinsi-box {
	margin-top: 72rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 400;
	font-size: 24rpx;
	color: #666666;
	line-height: 28rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.xieyi-info {
	color: #FB353B;
}
.captcha-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-right: 20rpx;
}
.captcha-image {
	width: 200rpx !important;
	height: 60rpx !important;
	border-radius: 8rpx !important;
	margin-left: 20rpx !important;
}
.back-btn {
	position: absolute;
	top: 40rpx;
	left: 30rpx;
	z-index: 10;
	width: 80rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.back-img {
	width: 48rpx;
	height: 48rpx;
}
</style>
